<template>
	<view class="my-content">
		<view class="search-box bg-white padding">
			<view class="u-margin-bottom-30" v-if="searchParams.activeTab === '2'">
				<u-input border :placeholder="$t('请输入搜索关键词')" disabled v-model="searchParams.name" />
			</view>
			<view class="u-flex flex-between u-margin-bottom-30">
				<view>
					{{$t("所在区域")}}
				</view>
				<view>
					<image v-if="searchParams.city === '0'" class="country" :src='serverImageUrl("/static/images/index/huangjin.png")'>
					</image>
					<image v-if="searchParams.city === '1'" class="country" :src='serverImageUrl("/static/images/index/huangji.png")'>
					</image>
				</view>
			</view>
			<view class="u-margin-bottom-30">
				<u-tag :text="searchParams.cityText || '--'" color="#ff7348" bg-color="#ffeee7"
					border-color="transparent" type="success" />
			</view>
			<view class="u-margin-bottom-30">
				{{$t("主营业务")}}
			</view>
			<view class="u-margin-bottom-30">
				<u-tag :text="searchParams.main_business || '--'" color="#ff7348" bg-color="#ffeee7"
					border-color="transparent" type="success" />
			</view>
			<view class="u-flex flex-between u-margin-bottom-30">
				<view class="u-font-sm color-666">
					{{$t("去重搜索")}}
					<view class="u-margin-top-10">
						<u-switch active-color="#ff7348" v-model="searchParams.repeat "></u-switch>
					</view>
				</view>
				<view>
					<u-button :custom-style="editorBtnStyle">{{$t("编辑搜索")}}</u-button>
				</view>
			</view>
		</view>
		<view class="padding color-999 u-font-sm">
			{{$t("搜索条数")}}: {{searchParams.searchNum}}
		</view>
		<view class="padding">
			<ListBySearchResult :check="check" :list="resultList"></ListBySearchResult>
		</view>

		<view class="padding bottomBar bg-white u-flex">
			<view class="u-flex action">
				<u-checkbox v-model="checkAll" @change="checkboxChange" active-color="#ff7348" shape="circle">
					<view class="u-margin-left-10">
						<view>{{$t("全选")}}</view>
						<view>{{checkData.length}}/{{resultList.length}}</view>
					</view>
				</u-checkbox>
			</view>
			<view class="u-flex">
				<u-button type="primary" :custom-style="customStyle1" hover-class="none" @click="cancel"
					class="u-margin-right-20">
					{{$t("取消")}}
				</u-button>
				<u-button type="primary" :custom-style="customStyle" hover-class="none" @click="addCollect">
					{{$t("添加至名单")}}
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import ListBySearchResult from '../components/ListBySearchResult.vue'
	export default {
		components: {
			ListBySearchResult
		},
		data() {
			return {
				id: '', //主键id 收藏夹id
				editorBtnStyle: {
					border: "1px solid #ff4a17",
					color: "#ff4a17"
				},
				searchParams: {},
				resultList: [{
					name: '3',
					checked: false
				}, {
					name: '3',
					checked: false
				}, {
					name: '3',
					checked: false
				}, {
					name: '3',
					checked: false
				}],
				customStyle: {
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx'
				},
				customStyle1: {
					background: 'transparent',
					'border-radius': '10rpx',
					'min-width': '180rpx',
					'max-width': '180rpx',
					color: '#ff4a17',
					'border': '1px solid #ff4a17'
				},
				check: true,
				checkAll: false,
			};
		},
		computed: {
			//获取当前选中的数据计算方法
			checkData() {
				return this.resultList.filter(item => item.checked)
			}
		},
		onLoad(option) {
			this.searchParams = {
				...option,
				repeat: option.repeat === 'true'
			}
			this.id = option.id;
		},
		methods: {
			//取消勾选方法
			cancel() {
				uni.navigateBack({
					delta: 1 // 返回的页面数
				})
			},
			addCollect() {
				console.log(this.checkData, this.id);
				// 4. 返回上一页面
				uni.navigateBack({
					delta: 2 // 返回的页面数
				})
			},
			//全选方法
			checkboxChange({
				value
			}) {
				this.resultList.map(item => {
					item.checked = value
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: #f6f6f6;
		height: auto;
		min-height: 100%;
		font-size: 30rpx;
		padding-bottom: 110rpx;

		.padding {
			padding: 20rpx 30rpx;
		}

		.color-999 {
			color: #999;
		}

		.color-666 {
			color: #666;
		}

		.flex-between {
			justify-content: space-between;
		}

		.bg-white {
			background: #fff;
		}

		.bottomBar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			justify-content: space-between;


			.action {
				color: #333;
				text-align: center;

				&>view {
					margin-right: 40rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.search-box {
			.country {
				height: 43.6rpx;
				width: 64.53rpx;
			}
		}
	}
</style>